<template>
    <div class="others">
        <a href="#info" class="others-item">
            <i class="iconfont icon-geren"></i>
            <p>基本信息</p>
        </a>
        <a href="#edu" class="others-item">
            <i class="iconfont icon-jiaoyubeijing"></i>
            <p>教育背景</p>
        </a>
        <a href="#skill" class="others-item">
            <i class="iconfont icon-jineng"></i>
            <p>专业技能</p>
        </a>
        <a href="#jobs" class="others-item">
            <i class="iconfont icon-jingli"></i>
            <p>工作经历</p>
        </a>
        <a href="#project" class="others-item">
            <i class="iconfont icon-gongzuojingyan"></i>
            <p>项目经验</p>
        </a>
        <a href="#evaluate" class="others-item">
            <i class="iconfont icon-icon-test"></i>
            <p>自我评价</p>
        </a>
        <a href="#others" class="others-item">
            <i class="iconfont icon-qita1"></i>
            <p>其它</p>
        </a>
        <a href="#works" class="others-item">
            <i class="iconfont icon-zuopin"></i>
            <p>作品</p>
        </a>
    </div>
</template>

<script>
    export default {
        name: "ResumeMenu",
        methods: {

        }
    }
</script>

<style scoped>
    .others {
        width: 80px;
        height: 500px;
        border-radius: 3px;
        box-shadow: 3px 3px 5px #2c3e50;
    }

    .others-item {
        width: 80px;
        height: 80px;
        padding: 5px;
        box-sizing: border-box;
        display: block;
        background-color: #2d8cf0;
        text-decoration: none;
        color: white;
    }

    .others-item:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        /*background-color: white;*/
    }

    .others-item:last-child {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .others-item:hover {
        background-color: white;
        color: #2d8cf0;
    }

    .others-item i {
        line-height: 45px;
        font-size: 36px;
    }

    .others-item p {
        margin: 0;
        font-size: 12px;
        line-height: 25px;
        font-weight: bolder;
    }
</style>